import { X } from "lucide-react";

interface TaskFilesProps {
  files: { type: string; small: string; medium: string }[];
  handleFileRemove: (index: number) => void;
}

export const NewTaskFilePreview = ({ files, handleFileRemove }: TaskFilesProps) => {
  if (files.length === 0) {
    return null;
  }

  return (
    <div className='flex gap-2 flex-wrap'>
      {files.map((file, index) => (
        <div key={index} >
          {file.type === 'img' ? (
            <div className='relative size-10 overflow-hidden' >
              <img src={file.small} alt={`Preview ${index}`} className='object-cover max-h-full max-w-full h-full w-full' />
              <button className='absolute top-0 right-0 bg-slate-300 backdrop-invert' onClick={() => handleFileRemove(index)} ><X color='black' size={16} /></button>
            </div>
          ) : (
            <div className='relative size-10 overflow-hidden' >
              <div>{file.type}</div>
              <button className='absolute top-0 right-0 bg-slate-300' onClick={() => handleFileRemove(index)} ><X size={16} color='black' /></button>
            </div>
          )}
        </div>
      ))}
    </div>
  )
}